import React,{Component} from 'react';
import { connect } from 'react-redux';
import {addToCart,removeCount,removeToCart,removeAll} from '../actions/cart'
import { HashRouter as Router, Switch, Route, NavLink } from 'react-router-dom' ;
var _ = require('lodash');

class Carts extends Component{
  constructor(props, context) {
    super(props);
    this.state = {
        login:false,
        carts:[]
    }
    this.removeToCart = this.removeToCart.bind(this);
    this.removeCount = this.removeCount.bind(this);
    this.removeAll = this.removeAll.bind(this);
    this.goPay = this.goPay.bind(this);
  }
  removeToCart(e,item){
    if (confirm("确认从购物车删除？")){ 
      this.props.removeToCart(item);
    }
  }
  goPay(){
    if(this.props.login){
      alert("敬请期待。。。");
    }else{
      this.props.history.push('/login');
    }
  }
  addToCart(e,item){
    this.props.addToCart(item,()=>{
    });
  }
  addToCart(e,item){
    this.props.addToCart(item,()=>{
    });
  }
  removeCount(e,item){
    if(item.quantity==1){
      return;
    }else{
      this.props.removeCount(item,()=>{
      });
    }
  }
  removeAll(){
    if (confirm("确认清空购物车？")){ 
      this.props.removeAll();
    }
  }
	render(){
    var {carts} = this.props;
    var totalPrice =0;
    carts && carts.map((item,i)=>{
        totalPrice += item.price*item.quantity;
    })
    return (
      <div id="v3-shopping-cart-container">
          <div className="beta-front-page-header hidden-xs" style={{marginTop: '1%', marginBottom: '1%',paddingLeft:'5%'}}><b className="pantry-brown-title pantry-brown-title-pc">购物车</b></div>
          <div className="col-md-12 col-sm-12 col-xs-12 padding-0px" style={{textAlign:'center', marginBottom: '50px'}}>
              <div className="col-md-12 col-sm-12 col-xs-12 " >
                <div className="col-md-12 col-sm-12 product-list-title hidden-xs" >
                  <div className="col-md-2 col-sm-2 col-20px " >产品</div>
                  <div className="col-md-2 col-sm-2 col-20px " >名称</div>
                  <div className="col-md-3 col-sm-3 col-20px " >价格</div>
                  <div className="col-md-3 col-sm-3 col-20px " style={{width: '120px'}} >个数</div>
                  <div className="col-md-3 col-sm-3 col-20px " style={{width: '120px'}} >小计</div>
                  <div className="col-md-2 col-sm-2 col-20px" >删除商品</div>
                </div>
                <div className="col-xs-12 product-list-title visible-xs" >
                  <div className="col-xs-12" >产品</div>
                </div>
              </div>
              
            <div className="col-xs-12 col-md-12 col-sm-12 product-list "  style={{fontSize:'16px'}}>
            { carts.map((item,index)=>{
                  return (
              <div className="col-md-12 col-sm-12 product-list-pc hidden-xs padding-0px">
                <NavLink to={`/detail/${item._id}`}><div className="col-md-2 col-sm-2 col-20px txt-center">
                  <img src={item.img} alt={item.title} />
                </div></NavLink>
                <div className="col-md-3 col-sm-3 col-20px info" >
                  <span>{item.title}</span>
                </div>
               <div className="col-md-3 col-sm-3 col-20px info" >
                  <span >¥{item.price}</span>
                  <span ></span>
                </div>
                <div className="col-md-3 col-sm-3 col-20px info" style={{width: '120px'}} >
                  <a href="javascript:;"  onClick={(e) => this.removeCount(e,item)} className="fa icon-minus-2" ></a>
                  <span style={{padding:'7%'}} >{item.quantity}</span>
                  <a href="javascript:;"  onClick={(e) => this.addToCart(e,item)} className="fa icon-plus-2" ></a>
                </div>
                <div className="col-md-3 col-sm-3 col-20px info" style={{width: '120px'}} >
                  <span className="red-text-fee">¥{item.price*item.quantity}</span>
                  <span ></span>
                </div>
                <div className="col-md-2 col-sm-2 col-20px info delete-cart-item" >
                  <a href="javascript:;"  onClick={(e) => this.removeToCart(e,item)}>删除</a>
                </div>
              </div>
              )})}
            <div className="row delivery-tr v3-delivery-tr" >
              <div className="col-sm-12"  style={{textAlign: 'right',width: '88%'}} >
                <div >
                  <span>总价:</span>
                  <span className="red-text-fee" ><b>¥{totalPrice}</b> </span>
                </div>
              </div>
              <div style={{textAlign: 'right',width: '90%'}} className="col-sm-10 submit-order-container" >
              <input id="submit-order-for-baidu" className="submit-button submit-order" onClick={this.removeAll} style={{marginRight: '10px',backgroundColor: '#333'}} type="submit" value="清空购物车" />
              <input id="submit-order-for-baidu" className="submit-button submit-order" onClick={this.goPay} type="submit" value="确认下单" />
              </div>
            </div>
          </div>
      </div>
      </div>
    )
    }
	}
 

const getValue =state=>{
	return {
    login: state.loginReduce.login,
    carts: state.cartReduce.carts
  }
}

const CartsContext = connect(getValue,{addToCart,removeCount,removeToCart,removeAll})(Carts);
module.exports = CartsContext;